<jsp:include page="../pageheader.jsp"/>

<div class="container">
    <div class="jumbotron">
        <h2>Create your Catch My Ride Account!</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-xs-12">Fields marked with * need to be filled with valid data!</label>
            </div>  

            <div class="form-group">
                <label for="newUserNameField" class="col-xs-12 col-sm-2">Username*</label>
                <div class="col-xs-12 col-sm-10">
                    <input type="text" class="form-control" maxlength="70" id="newUserNameField" placeholder="Your UserName" />
                </div>
            </div>
            <div class="form-group">
                <label for="newPasswordField" class="col-xs-12 col-sm-2">Password*</label>
                <div class="col-xs-12 col-sm-10">
                    <input type="password" class="form-control" maxlength="70" id="newPasswordField" placeholder="Your Passsword" />
                </div>
            </div>
            <div class="form-group">
                <label for="nameField" class="col-xs-12 col-sm-2">Name*</label>
                <div class="col-xs-12 col-sm-10">
                    <input type="text" class="form-control" maxlength="100" id="nameField" placeholder="Your Name" />
                </div>
            </div>
            <div class="form-group">
                <label for="identityNumberField" class="col-xs-12 col-sm-2">Identity Number*</label>
                <div class="col-xs-12 col-sm-10">
                    <input type="number" class="form-control" maxlength="11" id="identityNumberField" placeholder="Your Identity Number" />
                </div>
            </div>
            <div class="form-group ">
                <label for="emailField" class="col-xs-12 col-sm-2">Email*</label>
                <div class="col-xs-12 col-sm-10">
                    <input type="email" class="form-control input-sm" maxlength="60" id="emailField" placeholder="Your Email" />

                </div>
            </div>
            <div class="form-group">
                <label for="countryDropDown" class="col-xs-12 col-sm-2">Country*</label>
                <div class="col-xs-12 col-sm-10">
                    <select class="form-control" id="countryDropDown">
                        <option value="-1">Select a country</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="addressDropDown" class="col-xs-12 col-sm-2">Address*</label>
                <div class="col-xs-12 col-sm-10">
                    <select class="form-control" id="addressDropDown">
                        <option value="-1">Select a address</option>
                    </select>
                </div>
            </div>
            <div class="form-group ">
                <label for="welcomeMessageField" class="col-xs-12 col-sm-2">Welcome message</label>
                <div class="col-xs-12 col-sm-10">
                    <textarea class="form-control input-sm" id="welcomeMessageField" placeholder="Your message"></textarea>
                </div>
            </div>

            <div class="jumbotron">
                <h2>Your first car!</h2>
                <div class="form-group">
                    <label for="numberSeatsField" class="col-xs-12 col-sm-2">Seats*</label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="number" class="form-control" maxlength="2" id="numberSeatsField" placeholder="Number of car seats" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="plateNumberField" class="col-xs-12 col-sm-2">Plate Number*</label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" class="form-control" maxlength="10" id="plateNumberField" placeholder="Car plate number" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="brandField" class="col-xs-12 col-sm-2">Brand*</label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" class="form-control" maxlength="70" id="brandField" placeholder="Car brand" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="yearField" class="col-xs-12 col-sm-2">Year*</label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="number" class="form-control" maxlength="11" id="yearField" placeholder="Year of car production" />
                    </div>
                </div>
            </div>
            
            <div id="registerUserButtonArea" class="form-group">
                <button type="button" onclick="deepClean()" class="btn btn-default">Reset</button>
                <button type="button" onclick="sendNewUser()" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
</div>

<jsp:include page="../pagefooter.jsp"/>
